<template>
	<view class="">
		<view class="head-box" :style="{paddingTop:data.statusBarHeight+'rpx'}">
			<img class="bgi" :src="data.info.background" alt="">
			<view @click="back" class="navbar flex-align-center">
				<uv-icon name="arrow-left" color="#ffffff"></uv-icon>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="club-con">
				<view class="info-b">
					<img class="logo" :src="data.info.logo" alt="">
					<view class="info-right">
						<view class="flex-justify-s info-name-b">
							<text class="club-name">{{data.info.name}}</text>
							<button class="shareBtn" open-type="share">
								<img class="share-icon" src="../../../static/img/img/share.png" alt="">
							</button>
						</view>
						<view class="flex-align-center">
							<uv-tags v-for="(itm,idx) in data.info.label" :key="idx" :text="itm.label" borderColor='#F8F8F8'
								bgColor='#F8F8F8' color='#B5BACD' size="mini"></uv-tags>

						</view>
					</view>
				</view>
				<view class="introduce">{{data.info.introduction}}</view>
				<view class=" address flex-align-center">
					<img class="fx-dingwei" src="../../../static/img/img/fx-dingwei.png" alt="">
					<text>{{data.info.address}}</text>
				</view>
				<view class="flex-justify-s typ-b">
					<view class="flex-justify-center">
						<view class="flex-center-r type-item">
							<text class="num">{{data.info.memberCount}}</text>
							<text class="fenlei">会员</text>
						</view>
						<view class="flex-center-r type-item">
							<text class="num">{{data.info.gameCount}}</text>
							<text class="fenlei">赛事</text>
						</view>
						<view class="flex-center-r type-item">
							<text class="num">{{data.info.ticketCount}}</text>
							<text class="fenlei">票券</text>
						</view>
						<view class="flex-center-r type-item">
							<text class="num">{{data.info.siteCount}}</text>
							<text class="fenlei">场地</text>
						</view>
					</view>
					<view class="gz-btn" @click="followWithInterest">{{data.info.isConcern.code!=2?'已关注':'关注'}}</view>
				</view>
			</view>
			<view>
				<!-- 菜单 -->
				<view class="menu-box flex-justify-s">
					<navigator :url="`/pages/vip/vipList/vipList?id=${data.id}`" hover-class="none" class="menu-item">
						<img src="../../../static/img/img/club-vip.png" class="club-vip" alt="">
						<view class="text">会员</view>
					</navigator>
					<view @click="moreCD" class="menu-item">
						<img src="../../../static/img/img/club-dc.png" class="club-vip" alt="">
						<view class="text">订场</view>
					</view>
					<view @click="moreYHQ" class="menu-item">
						<img src="../../../static/img/img/club-yhq.png" class="club-vip" alt="">
						<view class="text">优惠券</view>
					</view>
					<view @click="moreSS" hover-class="none" class="menu-item">
						<img src="../../../static/img/img/club-ss.png" class="club-vip" alt="">
						<view class="text">赛事活动</view>
					</view>
				</view>
			</view>
			<view class="lower-part">
				<!-- 热门场地-->
				<view class="site-box">
					<view class="remen flex-justify-s">
						<text class="title">热门场地</text>
						<view @click="moreCD" class="flex-align-center">
							<text class="more">更多</text>
							<uv-icon name="arrow-right" color="#2C2C2C" size="12"></uv-icon>
						</view>
					</view>
					<view class="site-con flex-justify-s " v-for="(item,index) in data.info.siteInfoWXResponseList"
						:key="index">

						<img class="club-cd-type" :src="imgArr[item.type.code-1].img" alt="">
						<view class=" flex-center-a flex cd-con">
							<text class="title">{{item.name}}</text>
							<text class="time">营业时间：{{item.businessTimeStart}}-{{item.businessTimeEnd}}</text>
							<view class="flex-align-center">
								<view class="lable-item">{{item.type.value}}</view>
								<view class="lable-item">开放中</view>
							</view>
						</view>
						<view class="gz-btn" @click="bookingVenue(item.type.code)">我要订场</view>
					</view>
				</view>
				<!-- 优惠券 -->
				<view class="coupon-box">
					<view class="remen flex-justify-s">
						<text class="title">最新票券</text>
						<view @click="moreYHQ" class="flex-align-center">
							<text class="more">更多</text>
							<uv-icon name="arrow-right" color="#2C2C2C" size="12"></uv-icon>
						</view>
					</view>
					<view class="coupon flex-justify-s">
						<view class="coupon-item" v-for="(item,index) in data.info.ticketWXResponseList" :key="index">
							<view class="quan flex-align-center">
								<view class="pq-box">
									<text class="num">{{item.type.code==3?item.discount:item.ticketValue}}<text
											class="fuhao">{{item.type.code==3?'折':'￥'}}</text>
									</text>
								</view>

								<view class="line"></view>
								<view class="quan-sm">
									<text>{{item.type.value}}</text>
									<text>满{{item.threshold}}元可用</text>
								</view>
								<navigator :url="`/pages/subpackagesSon/coupon/buyNow/buyNow?id=${item.id}`"
									hover-class="none" class="draw-down">点击领取</navigator>
							</view>
						</view>

					</view>
				</view>
				<!-- 赛事 -->
				<view class="competition-box">
					<view class="remen flex-justify-s">
						<text class="title">热门赛事</text>
						<view @click="moreSS" hover-class="none" class="flex-align-center">
							<text class="more">更多</text>
							<uv-icon name="arrow-right" color="#2C2C2C" size="12"></uv-icon>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 赛事列表 -->
		<view class="list">
			<clubItem v-for="(item,index) in data.info.gameInfoWXResponseList" :key="index" :item="item"></clubItem>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		clubItem
	} from "@/compoments/discover/clubItem.vue";
	import {
		useStatusBarStore
	} from "@/store/index";
	import {
		echoEnterpriseById,
		saveConcern,
		getMnumByName
	} from "../../requestApi/api.js";
	import {
		imgArr
	} from '../../utils/uitls.js';
	const statusBar = useStatusBarStore();
	const data = ref({
		statusBarHeight: 0,
		id: '',
		info: {},
	});
	onLoad((e) => {
		data.value.id = e.id;
		getDetails();

	});
	onShow(() => {
		data.value.statusBarHeight = statusBar.getStatusBarHeight();
	})
	//更多赛事
	const moreSS = () => {
		uni.navigateTo({
			url: `/pages/subpackagesSon/competition/competitionList/competitionList?id=${data.value.id}`
		})
	};
	//订场
	const bookingVenue = (code) => {
		uni.navigateTo({
			url: `/pages/booking/booking/booking?entid=${data.value.id}&type=${code}`
		})
	};
	//更多场地
	const moreCD = () => {
		uni.navigateTo({
			url: `/pages/booking/bookingList/bookingList?id=${data.value.id}`
		})
	};
	//更多优惠券
	const moreYHQ = () => {
		uni.navigateTo({
			url: `/pages/subpackagesSon/coupon/coupon/coupon?id=${data.value.id}`
		})
	};

	//关注
	const followWithInterest = () => {
		// data.value.info.isConcern.code==2?1:2
		let state=data.value.info.isConcern.code==2?1:2;
		let form = {
			certificationId: data.value.id,
			concern: state,
			id: data.value.info.certificationId,
			userId: uni.getStorageSync('userInfo').id
		}
		saveConcern(form).then(res => {

			data.value.info.isConcern.code = state;

		})
	};
	//获取详情
	const getDetails = () => {
		echoEnterpriseById({
			id: data.value.id
		}).then(res => {
			data.value.info = res.data;
		})
	};
	//返回上一页
	function back() {
		uni.navigateBack(1)
	}
	//分享
	onShareAppMessage(() => {
		return {
			title: '俱乐部',
			path: `pages/club/club?id=${data.value.id}`,
		}
	})
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.head-box {
		width: 100vw;
		height: 440rpx;
		position: relative;

		.bgi {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 100%;
		}
	}

	.content {
		padding: 0 20rpx;

		.club-con {
			position: relative;
			z-index: 2;
			width: 100%;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			background-color: #fff;
			margin-top: -110rpx;
			padding: 12rpx 40rpx 1rpx;

			.info-b {
				display: flex;
				margin-bottom: 20rpx;

				.logo {
					width: 104rpx;
					height: 104rpx;
					border: 8rpx solid #fff;
					border-radius: 20rpx;
					margin-top: -40rpx;
					margin-right: 16rpx;
				}

				.info-right {
					flex: 1;

					.info-name-b {
						margin-bottom: 8rpx;

						.club-name {
							font-size: 30rpx;
							font-weight: bold;
							color: #2C2C2C;
						}

						.shareBtn::after {
							border: none;
						}

						.shareBtn {
							width: 36rpx;
							height: 40rpx;
							padding: 0;
							margin: 0;
							line-height: normal;
							background: transparent;
						}

						.share-icon {
							width: 36rpx;
							height: 36rpx;
						}
					}


				}

			}

			.introduce {
				font-size: 24rpx;
				color: #2C2C2C;
				margin-bottom: 20rpx;
			}

			.address {
				margin-bottom: 30rpx;

				.fx-dingwei {
					width: 20rpx;
					height: 20rpx;
					margin-right: 20rpx;
				}

				text {
					font-size: 20rpx;
					color: #A5A5A5;
				}
			}

			.typ-b {
				margin-bottom: 36rpx;

				.type-item {
					flex: 1;
					margin-right: 50rpx;

					.num {
						font-size: 30rpx;
						font-weight: bold;
						color: #2C2C2C;
						display: inline-block;
						// margin-bottom: ;
					}

					.fenlei {
						font-size: 20rpx;
						color: #A5A5A5;
					}
				}

			}





		}
	}

	.menu-box {
		padding: 0 18rpx 36rpx;
		background-color: #FFFFFF;

		.menu-item {
			text-align: center;

			.club-vip {
				width: 156rpx;
				height: 140rpx;
			}

			.text {
				font-size: 26rpx;
				color: #2C2C2C;
				margin-top: -30rpx;
			}
		}

	}

	.lower-part {
		padding: 0 40rpx 26rpx;
		background-color: #FFFFFF;

		.site-box {
			margin-bottom: 30rpx;

			.site-con {
				margin-top: 42rpx;
				height: 180rpx;
				background: rgba(233, 246, 254, 0.39);
				border-radius: 20rpx;
				width: 100%;
				padding: 0 26rpx;

				.club-cd-type {
					width: 138rpx;
					height: 148rpx;
					margin-right: 16rpx;
				}

				.cd-con {
					height: 148rpx;
					align-items: flex-start;

					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: #2C2C2C;
					}

					.time {
						font-size: 20rpx;
						color: #A5A5A5;
					}

					.lable-item {
						height: 36rpx;
						background: rgba(255, 255, 255, 1);
						border-radius: 8rpx;
						padding: 0 18rpx;
						line-height: 36rpx;
						font-size: 20rpx;
						color: #3C66F6;
						margin-right: 20rpx;
					}
				}


			}

		}

		.coupon-box {
			margin-bottom: 44rpx;

			.coupon {
				margin-top: 22rpx;

				.coupon-item {
					width: 280rpx;
					height: 100rpx;
					position: relative;
					background: url('../../static/img/img/club-yhq-bg.png') no-repeat;
					background-size: cover;

					.quan {
						height: 100%;
						padding-left: 14rpx;

						.pq-box {
							width: 78rpx;

							.num {
								font-size: 48rpx;
								font-weight: bold;
								color: #F26D61;
								letter-spacing: -4rpx;
								font-family: DINCond-Black;
								position: relative;
								width: max-content;

								.fuhao {
									font-size: 20rpx;
									color: #F26D61;
									position: absolute;
									top: 0;
								}
							}

						}


						.line {
							height: 46rpx;
							width: 2rpx;
							background-color: rgba(242, 108, 97, 0.2);
							margin: 0 6rpx 0 24rpx;
						}

						.quan-sm {
							font-size: 18rpx;
							color: #F26D61;
							display: flex;
							flex-direction: column;

							text {
								// margin-bottom: 5rpx;
							}
						}
					}

					.draw-down {
						position: absolute;
						right: 0;
						top: 0;
						font-size: 18rpx;
						color: #FFFFFF;
						width: 30rpx;
						line-height: 20rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
					}
				}

			}
		}



		.remen {
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #2C2C2C;
			}

			.more {
				font-size: 26rpx;
				color: #A5A5A5;
				display: inline-block;
				margin-right: 18rpx;
			}
		}



	}

	.gz-btn {
		width: 167rpx;
		height: 60rpx;
		background: rgba(61, 102, 246, 1);
		box-shadow: 0rpx 4rpx 12rpx rgba(61,102,246,0.55);
		border-radius: 30rpx;
		font-size: 24rpx;
		font-weight: bold;
		line-height: 60rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.list {
		margin-top: -20rpx;
		position: relative;
		z-index: 2;
		padding-bottom: 20rpx;
	}

	.navbar {
		height: 88rpx;
		padding: 0 40rpx;
	}

	::v-deep .uv-tags-wrapper {
		margin-right: 20rpx;
	}

	::v-deep .uv-tags--primary {
		// width: 80rpx;
		height: 28rpx !important;
	}

	::v-deep .uv-tags__text--mini {
		font-size: 20rpx !important;
	}
</style>